<template>
  <div class="down-table-wrap">
    <div name="handle-bar" class="handle-wrap">
      <Button @click="handleDown" icon="ios-download-outline" type="primary">导出</Button>
    </div>
    <table-page
      class="table-wrapper"
      :fit="false"
      :columns="columns"
      :value="tableData"
      :total="total"
      :pageNum="pageNum"
      :pageSize="pageSize"
      :loading="loading"
      @on-change-page="onChangePage"
      :stripe="false"
      size="small"
      :border="false"
      :no-data-text="tableHint"
      height="400"
    >
    </table-page>
  </div>
</template>
<script>
import tableMixin from '@/mixins/table'
import tableColums from './tableColums'
import { fetchDownTableData } from '@/api/meterManageMissingData'

export default {
  name: 'MeterManageDownTable',
  mixins: [tableMixin],
  props: {
    options: {
      type: Object
    }
  },
  data() {
    return {
      columns: this.renderTableColums(),
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      tableHint: ''
    }
  },
  created () {
    this.loadAjax()
  },
  methods: {
    /**
     * 表格行设置
     * @return {[type]} [description]
     */
    renderTableColums() {
      return tableColums
    },
    handleDown() {
      this.$Notice.warning({
        title: '操作提示',
        desc: ',,ԾㅂԾ,,'
      })
    },
    /**
     * desc: 加载表格数据
     * param {type}
     * return: void
     */
    async loadAjax() {
      const { pageNum, pageSize } = this
      this.tableHint = '正在刷新…'
      this.loading = true
      const { code, date } = await fetchDownTableData({
        ...this.options,
        pageNum,
        pageSize
      })
      this.loading = false
      const { list = [] } = date
      if ((code === 200) && (list.length > 0)) {
        this.tableHint = ''
        const { total, pageNum, pageSize } = date
        this.total = total
        this.pageNum = pageNum
        this.pageSize = pageSize
        this.tableData = list
      } else {
        this.tableData = []
        this.tableHint = '暂无数据'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .down-table-wrap {
    .handle-wrap {
      padding: 10px;
    }
  }
</style>
